<template>
  <div class="line-chart">
    <!-- <div class="title">{{headTitle}}</div> -->
    <div :id="chartId"
         :style="{width: '100%', height: '184px'}"></div>
  </div>
</template>
<script>
import * as echarts from "echarts"
export default {
  name: "envCompliance",
  props: {
    chartId: {
      type: String,
      default: "chart"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(
        );
      }
    },
    timeData: {
      deep: true,
      handler(val) {
        this.setOptions(
        );
      }
    }
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resizeHandler() {
      this.chart.resize();
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.chartId));
      this.setOptions(
      );
    },
    setOptions() {
      // this.chart.setOption({
      //   series: [
      //     {
      //       type: 'gauge',
      //       axisLine: {
      //         lineStyle: {
      //           width: 10,
      //           color: [
      //             [0.3, '#67e0e3'],
      //             [0.7, '#37a2da'],
      //             [1, '#fd666d']
      //           ]
      //         }
      //       },
      //       pointer: {
      //         itemStyle: {
      //           color: 'auto'
      //         }
      //       },
      //       axisTick: {
      //         distance: -30,
      //         length: 8,
      //         lineStyle: {
      //           color: '#fff',
      //           width: 2
      //         }
      //       },
      //       splitLine: {
      //         distance: -30,
      //         length: 30,
      //         lineStyle: {
      //           color: '#fff',
      //           width: 4
      //         }
      //       },
      //       axisLabel: {
      //         color: 'auto',
      //         distance: 40,
      //         fontSize: 20
      //       },
      //       detail: {
      //         valueAnimation: true,
      //         formatter: '{value} km/h',
      //         color: 'auto'
      //       },
      //       data: [
      //         {
      //           value: 70
      //         }
      //       ]
      //     }
      //   ]
      // });


      let option = {
        series: [
          {
            type: 'gauge',
            data: [
              {
                value: 68.5
              }
            ],
            //仪表盘轴线相关配置
            axisLine: {
              roundCap: true,//是否在两端显示成圆形。
              lineStyle: {
                width: 10,
                color: [
                  [0.5, '#7fe47e'],
                  [0.65, '#ffeb3a'],
                  [0.85, '#ffae51'],
                  [1, '#ff7171']
                ]
              }
            },
            //分隔线样式
            splitLine: {
              length: 8,//分隔线线长。支持相对半径的百分比。
              distance: 2,//分隔线与轴线的距离。
              lineStyle: {
                color: '#ccc',
                width: 2
              }
            },
            //刻度样式
            axisTick: {
              length: 5,
              distance: 2, 
              lineStyle: {
                color: '#ccc',
                width: 2
              }
            },
            //刻度标签
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 12
            },
            //仪表盘指针
            pointer: {
              width: 4,
              itemStyle: {
                color: 'inherit'
              }
            },
            //仪表盘详情，用于显示数据
            detail: {
              //offsetCenter: ["0", "75%"],//相对于仪表盘中心的偏移位置
              valueAnimation: true,
              formatter: '{value}',
              color: 'inherit',
              fontSize: 18
              //offsetCenter: [0, '70%']
            }
          }
        ]
      };

      this.chart.setOption({
        series: [
          {
            data: [
              {
                value: +(Math.random() * 100).toFixed(2)
              }
            ]
          }
        ]
      });
      option && this.chart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.line-chart {
  display: flex;
  .title {
    width: 80px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    color: #0a0a0a;
  }
}
</style>
